<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- 必须的 meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #app{
            display: inline-block;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div class="container-fluid content" id="matterCount">
    <div class="toolbar" style="float: right">
        <input type="text" id="selName" placeholder="请输入货物名称">
        <button class="btn btn-primary" @click="selCustomerByName()">查询</button>
        <button class="btn btn-success" onclick="location.href='addMatterPrice.html'">添加</button>
        <button class="btn btn-danger" id="del-btn" @click="delCustomerAll()">批量删除</button>
        <a class="btn btn-warning " href="../Matter/importCustomerExcel" >导出(Excel)</a>
        <input id="articleImageFile" name="excelFile" type="file" class="form-control" style="width: 300px; display: inline;" />
        <a class="btn btn-warning" id = "import" onclick="importExcel()" shiro:hasPermission="system:student:import">
            <i class="fa fa-upload"></i> 导入</a>
    </div>
    <table id="customer-tab" class="table table-hover" style="text-align: center;line-height: 38px">
        <tr>
            <th><input type="checkbox" @click="allCheck" id="checkAll"/></th>
            <th>货物编号</th>
            <th>货物名称</th>
            <th>货物单位</th>
            <th>货物税率</th>
            <th>货物成本单价</th>
            <th>货物加工运输单价</th>
            <th>货物库存量</th>
            <th>操作</th>
        </tr>
        <tr v-for="m in list">
            <td><input class="check" @click="isCheckAll" type="checkbox" :value="m.itemsNo"></td>
            <td>{{ m.itemsNo }}</td>
            <td>{{ m.itemsName }}</td>
            <td>{{ m.itemsUnit}}</td>
            <td>{{ m.itemsTax }}</td>
            <td>{{ m.itemsCost }}</td>
            <td>{{ m.itemsAddTranCost }}</td>
            <td>{{ m.itemsStoreCounts }}</td>
            <td>
                <button type="button" class="btn btn-primary" @click="openUpd(m)">
                    修改
                </button>
            </td>
        </tr>
    </table>
    <!--            分页-->
    <div class="pagination-div">
        <!--                无序列表 -->
        <ul class="pagination" id="page-ul">
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" @click="cutPage(1)">首页</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=1">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
            <li class="page-item active">
                <a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=page.pageTotal">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow+1)">{{page.pageNow+1}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);
                   ">共{{page.count}}条数据</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageTotal)">尾页</a>
            </li>
        </ul>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改窗口</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body" id="app-div">
                    <form id="matterInfo-form">
                        <div class="form-group">
                            <label for="itemsUnit">货物单位:</label>
                            <input type="text" name="itemsUnit" class="form-control" id="itemsUnit"
                                   v-model="matter.itemsUnit">
                        </div>
                        <div class="form-group">
                            <label for="itemsTax">货物税率:</label>
                            <input type="number" name="itemsTax" step="0.01"v-model="matter.itemsTax" class="form-control" id="itemsTax"
                            >
                        </div>
                        <div class="form-group">
                            <label for="itemsCost">货物成本单价:</label>
                            <input type="number" name="itemsCost" v-model="matter.itemsCost" step="0.01" class="form-control" id="itemsCost"
                            >
                        </div>
                        <div class="form-group">
                            <label for="itemsAddTranCost">货物加工运输单价:</label>
                            <input type="number" name="itemsAddTranCost" v-model="matter.itemsAddTranCost" step="0.01" class="form-control" id="itemsAddTranCost"
                            >
                        </div>
                        <div class="form-group">
                            <label for="itemsStoreCounts">货物库存量:</label>
                            <input type="number" name="itemsStoreCounts" v-model="matter.itemsStoreCounts" step="0.01" class="form-control" id="itemsStoreCounts"
                            >
                        </div>
                        <input type="text" name="itemsNo" style="display: none" step="0.01" v-model="matter.itemsNo" class="form-control"
                        >
                    </form>
                </div>
                <!-- 模态框底部 -->

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="submit-emp" style="margin-right:150px "
                            @click="updMatterPrice()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap/my.js"></script>
<script>
    let matterPriceVue;
    let map;

    // 初始化表格数据
    $(function () {
        // 调用查询方法 因为是第一次查询所以当前页参数1
        map = selMatter(1);
        // Vue列表 表格数据
        matterPriceVue = new Vue({
            el: '#matterCount',
            data: {
                list: map.matterPricelist,// 展示表格
                page: map,// 用于分页
                matter:{}
            },// 参数调用查询函数
            methods: {
                allCheck: function () {
                    eventHub.$emit("allCheck",null);
                },

                isCheckAll: function () {
                    eventHub.$emit("isCheckAll",null);
                },
                cutPage: function (pageNow) {
                    var z=$("#selName").val();
                    matterPriceVue.list = selMatter(pageNow,z).matterPricelist;
                    matterPriceVue.page.pageNow = pageNow;
                }
            ,
                updMatterPrice:function(){
                $.ajax({
                    type:"post",
                    url:"../Matter/updMatterPrice",
                    data:$("#matterInfo-form").serialize(),
                    dataType:"json",
                    success:function (data){
                        alert(data.message);
                        matterPriceVue.list = selMatter(1,"").matterPricelist;
                        matterPriceVue.page = selMatter(1,"");
                        $('#myModal').modal('hide');
                    }
                })
            },
                // deriveExcel:function (){
                //   $.ajax({
                //       type:"post",
                //       url:"../Matter/importCustomerExcel",
                //       dataType:"json",
                //       success:function (data){
                //         alert("导出成功")
                //       }
                //   })
                // },
            openUpd: function (m) {
                // 打开模态框 获取模态框id.modal('show');
                $('#myModal').modal('show');
                this.matter = m;

            },
                delCustomerAll: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。 this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }
                    })
                    if(ids=="") return ;
                    // ajax把拼接的id传入到后台
                    console.log(ids);
                    $.ajax({
                        type: "post",
                        url: "../Matter/delMatterPriceAll",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            // 删除完成后重新查询第一页
                            alert(data.message)
                            matterPriceVue.list = selMatter(1,"").matterPricelist;
                            matterPriceVue.page = selMatter(1,"");
                            eventHub.$emit("closeCheckAll",null);
                        }
                    });
                },
                selCustomerByName:function (){
                    var z=$("#selName").val();
                    matterPriceVue.list = selMatter(1,z).matterPricelist;
                    matterPriceVue.page = selMatter(1,z);
                },
            }

        });
    });


    function selMatter(pageNow,itemsName) {
        let map = [];
        $.ajax({
            type: "post",
            url: "../Matter/selMatterPrice",
            data: {pageNow: pageNow, pageCount: 5,itemsName: itemsName },// 携带当前页参数，显示的条数
            dataType: "json",
            async: false,
            success: function (data) {
                // 接受Controller层查询结果
                map = data;
            }
        });
        return map;
    }

    function importExcel() {
        var formData = new FormData();
        var name = $("#articleImageFile").val();
        formData.append("file", $("#articleImageFile")[0].files[0]);
        formData.append("name", name);//这个地方可以传递多个参数
        $.ajax({
            url: '../Matter/importExcel',
            type: 'POST',
            async: false,
            data: formData,
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            beforeSend: function () {
                console.log("正在进行，请稍候");
            },
            success: function (responseStr) {
                if (responseStr == true) {
                    alert("导入成功");
                } else {
                    alert("导入失败");
                }
            }
        });
    }


</script>
</body>
</html>